<template>
  <div class="dashboard-container">
    <el-row :gutter="12">
      <el-col :span="4">
        <el-card shadow="always" class="info-block">
          <div class="value">21</div>
          <div class="label">今日合并数</div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="always" class="info-block">
          <div class="value">0</div>
          <div class="label">今日拆分数</div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="always" class="info-block">
          <div class="value">180</div>
          <div class="label">今日新增数</div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="always" class="info-block">
          <div class="value">78333</div>
          <div class="label">总合并数</div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="always" class="info-block">
          <div class="value">0</div>
          <div class="label">总拆分数</div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="always" class="info-block">
          <div class="value">520854</div>
          <div class="label">总主索引数</div>
        </el-card>
      </el-col>
    </el-row>

    <el-card shadow="always" style="margin-top: 30px;height: 600px" :body-style="{height:'100%'}">
      <ChartBlock :option="option"></ChartBlock>
    </el-card>
  </div>
</template>

<script>
import ChartBlock from '@/components/ChartBlock'
import { dashboard } from '@/api/dashboard'

export default {
  name: 'Dashboard',
  components: {
    ChartBlock
  },
  data() {
    return {
      option: null
    }
  },
  methods: {
    setOption() {
      this.option = dashboard.getOption()
    }
  },
  mounted() {
    this.setOption()
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.el-card {

}

.info-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  text-align: center;
}

.info-block .label {
  font-size: 14px;
  font-weight: 400;
  color: rgba(94, 94, 94, 1);
  opacity: 0.7;
}

.info-block .value {
  margin-top: 10px;
  font-size: 22px;
  font-weight: bold;
}
</style>
